<template>
<div>
  <el-card class="maincardstyle">
    <!-- 标题 -->
    <h1 style="text-align: center">Process Work Order (PWO)</h1>
    <el-button type="primary" @click="saveHeader" style="margin-bottom: 20px"
      >保存</el-button
    >
    <!-- 表头 -->
    <div class="borderS">
      <el-row>
        <el-col class="borderS" :span="7">
          <el-text class="labelWidth"> PWO NO </el-text>
          ：{{ formatOrderNo(headerData?.order_No) }}
        </el-col>
        <el-col class="borderS" :span="9">
          <el-text class="labelWidth"> Material No </el-text>
          ： {{ headerData?.matL_No }}
        </el-col>
        <el-col class="borderS" :span="8">
          <el-text class="labelWidth"> Batch No </el-text>
          ： {{ headerData?.batch_no }}
        </el-col>
      </el-row>

      <el-row>
        <el-col class="borderS" :span="7">
          <el-text class="labelWidth"> Rel Date </el-text>
          ： {{ headerData?.Order_Start_Date }}
        </el-col>
        <el-col class="borderS" :span="9">
          <el-text class="labelWidth"> Deseription </el-text>
          ：{{ headerData?.matl_Des }}
        </el-col>
        <el-col class="borderS" :span="8">
          <el-text class="labelWidth"> Planned Qty </el-text>
          ： {{ headerData?.qty }}
        </el-col>
      </el-row>

      <el-row>
        <el-col class="borderS" :span="7">
          <el-text class="labelWidth"> Plant </el-text>
          ： SG
        </el-col>
        <el-col class="borderS" :span="9">
          <el-text class="labelWidth"> Mat. Type </el-text>
          ：{{ headerData?.xxxx }}
        </el-col>
        <el-col class="borderS" :span="8">
          <el-text class="labelWidth"> Prd. Version </el-text>
          ： {{ headerData?.production_version }}
        </el-col>
      </el-row>

      <el-row>
        <el-col class="borderS" :span="7">
          <el-text class="labelWidth">Schedule S.Date </el-text>
          ： {{ headerData?.Order_Start_Date }}
        </el-col>
        <el-col class="borderS" :span="9">
          <el-text class="labelWidth"> LABEL </el-text>
          ：
        </el-col>
        <el-col class="borderS" :span="8">
          <el-text class="labelWidth"> BOM AIt. </el-text>
          ： {{ headerData?.bom_Alt }}
        </el-col>
      </el-row>

      <el-row>
        <el-col class="borderS" :span="7">
          <el-text class="labelWidth"> Worked By </el-text> ：
        </el-col>
        <el-col class="borderS" :span="9">
          <el-input class="headerInput" v-model="headerData.worked_by" />
        </el-col>
        <el-col class="borderS" :span="8">
          <el-text class="labelWidth"> Recipe No </el-text>
          ： {{ headerData?.recipe_No }}
        </el-col>
      </el-row>

      <el-row>
        <el-col class="borderS" :span="7">
          <el-text class="labelWidth"> TANK NO </el-text> ：
        </el-col>
        <el-col class="borderS" :span="17">
          <el-input class="headerInput" v-model="headerData.tank_no" />
        </el-col>
      </el-row>

      <el-row>
        <el-col class="borderS" :span="7">
          <el-row style="height: 60px">
            <el-text class="labelWidth"> Special Instruction </el-text>
          </el-row>
          <el-row>
            <el-text class="labelWidth"> Sales Notes </el-text>
          </el-row>
        </el-col>
        <el-col class="borderS" :span="9">
          <el-row style="height: 60px">
            <el-text style="width: 100%">
              <el-input
                class="headerInput"
                v-model="headerData.special_instruction"
              />
            </el-text>
          </el-row>
          <el-row>
            <el-text style="width: 100%">
              <el-input class="headerInput" v-model="headerData.sales_notes" />
            </el-text>
          </el-row>
        </el-col>
        <el-col class="borderS" :span="8">
          <el-row>
            <el-text class="labelWidth"> Last Batch No</el-text> ：
            {{ headerData?.lastBatch_no }}
          </el-row>
          <el-row
            style="border-top: 2px solid #000; border-bottom: 2px solid #000"
          >
            <el-text class="labelWidth"> Last Batch Date </el-text> ：
            {{ headerData?.lastBatch_date }}
          </el-row>
          <el-row>
            <el-text class="labelWidth"> Last Prod Ver </el-text> ：
            {{ headerData?.lastprod_ver }}
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!-- 表格 -->
    <el-row class="tableS">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#333' }"
      >
        <el-table-column align="center" type="index" fixed="left" />
        <el-table-column
          align="center"
          prop="step"
          label="Seq.No"
          width=""
        />
        <el-table-column
          align="center"
          prop="operation"
          label="Op.No"
          width=""
        />
        <el-table-column
          prop="ingre_desc"
          align="left"
          label="Comp. No / Resource / Description / Instruction"
          min-width="500"
        >
          <template #default="scope">
            <div v-if="scope.row.unit == 'KG'">
              {{ scope.row.ingre_no }} {{ scope.row.ingre_desc }}
            </div>
            <div v-if="scope.row.unit == 'INS'">
              {{ scope.row.remark }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="qty"
          align="center"
          label="QTY"
          width=""
        />
        <el-table-column
          prop="unit"
          align="center"
          label="UoM"
          width=""
        />
        <el-table-column
          prop="actual_usage"
          align="center"
          label="Actual Usage"
          width=""
        >
          <template #default="scope">
            <el-button
              text
              type="primary"
              @click="handleActual(scope.row, scope.row.actual_usage)"
            >
              {{ scope.row.actual_usage }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="Check">
          <el-table-column align="center" prop="check1" label="1" width="100">
            <template #default="scope">
              <div v-if="scope.row.check1 == 0">
                <el-button type="info" plain @click="checkBtn(scope.row)">
                  {{ $t("tasksheet.check") }}
                </el-button>
              </div>
              <div v-if="scope.row.check1 == 1">
                <el-button type="success" :icon="Check" circle> </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="check2" label="2" width="100">
            <template #default="scope">
              <div v-if="scope.row.check2 == 0">
                <el-button type="info" plain @click="checkBtn2(scope.row)">
                  {{ $t("tasksheet.check") }}</el-button
                >
              </div>
              <div v-if="scope.row.check2 == 1">
                <el-button type="success" :icon="Check" circle> </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          prop="batch"
          align="center"
          label="Batch No"
          width=""
        />
      </el-table>
    </el-row>

    <el-divider />

    <!-- qa -->
    <el-row class="tableS">
      <el-table
        :data="qaData"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#fafafa', color: '#333' }"
      >
        <el-table-column align="center" label="In Process / Final Inspection">
          <el-table-column
            prop="item_spec"
            align="center"
            label="Item"
            width=""
          />
          <el-table-column prop="result" align="center" label="Result" width="">
            <template #default="scope">
              <el-button
                text
                type="primary"
                @click="handleRowDblClick(scope.row, scope.row.result)"
              >
                {{ scope.row.result }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="Sepc">
            <el-table-column
              align="center"
              prop="lower"
              label="Lower"
              width="100"
            />
            <el-table-column
              align="center"
              prop="upper"
              label="Upper"
              width="100"
            />
            <el-table-column
              align="center"
              prop="uom"
              label="UoM"
              width="100"
            />
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-row>
  </el-card>

  <!-- 公司log -->
  <!-- <el-row>
    <div class="kx-log-box">
      技术支持：
      <img
        class="imgstyle"
        src="@/assets/images/kxauto.png"
        alt="描述图片的文字"
      />
      西安开轩自动化有限责任公司
    </div>
  </el-row> -->

  <!-- 弹窗 -->
  <form-dialog ref="formRef" />
  <formActual-dialog ref="formActualRef" />
</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUpdated } from "vue";
import router from "@/router"; //路由跳转
import emitter from "@/utils/eventbus"; //引入bus
import {
  apiSearchgetPwsTableFromDatetime,
  apigetSapDataFromOrderNo,
  apigetOrderQaFromOrderNo,
  apiupdateSapData,
  apiupdatePwsnoTableFromOrderNo,
} from "@/api/tasksheet";
import { ElMessage, ElMessageBox } from "element-plus";
// 接受路由传参
import { useRoute } from "vue-router";
// 引入子组件
import formDialog from "./formQa.vue";
import formActualDialog from "./formActual.vue";
const formRef = ref();
const formActualRef = ref();
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from "@element-plus/icons-vue";

const route = useRoute();
const orderNo = ref();
const headerData = ref({} as any);
const tableData = ref(); //table数组
const qaData = ref(); //qa数组
// 去掉前四个字符 0
const formatOrderNo = (orderNo: string | undefined) => {
  if (!orderNo) return ""; // 如果值为空，返回空字符串
  return orderNo.slice(4); // 去掉前四个字符
};
onMounted(() => {
  if (route.query.row) {
    orderNo.value = JSON.parse(route.query.row as string).order_No;

    getHeaderData(orderNo.value); // 获取表头数据
    getfetchList(orderNo.value); // 获取电子单列表数据
    getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  }

  // if (route.query.row) {
  //   headerData.value = JSON.parse(route.query.row as string);
  //   orderNo.value = headerData.value.order_No;
  //   getfetchList(orderNo.value); // 获取电子单列表数据
  //   getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  // }

  emitter.on("refreshQa", async () => {
    getOrderQaFromOrderNo(orderNo.value); // 获取Qa数据
  });
  emitter.on("refreshActual", async () => {
    getfetchList(orderNo.value); // 获取电子单列表数据
  });
});

// 点击实际使用情况
const handleActual = (row: any, value: any) => {
  formActualRef.value.openDialog(row, value);
};

const checkBtn = (row: any) => {
  row.check1 = 1; //不可编辑 √
  getupdateSapData(row); // 修改实际使用情况、检查勾选
};

const checkBtn2 = (row: any) => {
  row.check2 = 1; //不可编辑 √
  getupdateSapData(row); // 修改实际使用情况、检查勾选
};

// 修改实际使用情况、检查勾选
const getupdateSapData = (row: any) => {
  apiupdateSapData([
    {
      order_no: row.order_no,
      step: row.step,
      actual_usage: row.actual_usage,
      check1: row.check1,
      check2: row.check2,
    },
  ])
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg);
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// 获取表头数据
const getHeaderData = async (id: any) => {
  await apiSearchgetPwsTableFromDatetime({
    Order_Start_Date: "",
    order_type: "",
    order_no: id,
  })
    .then((res: any) => {
      if (res.code == 200) {
        headerData.value = res.data[0];
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// 获取电子单列表数据
const getfetchList = async (id: any) => {
  await apigetSapDataFromOrderNo({ order_no: id })
    .then((res: any) => {
      if (res.code == 200) {
        tableData.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// 获取Qa数据
const getOrderQaFromOrderNo = async (id: any) => {
  await apigetOrderQaFromOrderNo({ order_no: id })
    .then((res: any) => {
      if (res.code == 200) {
        qaData.value = res.data;
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};

// ------------------- 编辑表格 ------------------
// 点击行的处理函数
const handleRowDblClick = (row: any, value: any) => {
  formRef.value.openDialog(row, value);
};
// ------------------- 编辑表格 end ------------------

// 保存表头输入框
const saveHeader = () => {
  apiupdatePwsnoTableFromOrderNo([
    {
      worked_by: headerData.value.worked_by,
      special_instruction: headerData.value.special_instruction,
      sales_notes: headerData.value.sales_notes,
      tank_no: headerData.value.tank_no,
      order_No: orderNo.value,
    },
  ])
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage.success(res.msg);
        getHeaderData(orderNo.value); // 获取表头数据
      } else {
        ElMessage.warning(res.msg);
      }
    })
    .catch((err) => {
      ElMessage.error(err.message);
    });
};
</script>

<style scoped lang="scss">
::v-deep .el-card__body {
  padding: 0px;
}

.topcardstyle {
  padding: 10px 20px 10px !important;
  margin-bottom: 10px;
  // background-color: #eee;
}

.maincardstyle {
  padding: 20px;
}

.createbtnstyle {
  margin-bottom: 20px;
}

.inputstyle {
  width: 300px;
}

// 搜索
.demo-form-inline .el-name {
  --el-name-width: 220px;
}

.formstyle {
  margin-bottom: -18px;
}

// 分页
.demo-pagination-block {
  margin: 0 auto;
  margin-top: 15px;
  // margin-bottom: 35px;
}

// 小圆点
.istyleNo {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red;
  border-radius: 50%;
  margin-right: 5px;
}

.istyleOk {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: green;
  border-radius: 50%;
  margin-right: 5px;
}

// 公司log
.kx-log-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 20px;
  line-height: 20px;
  margin-top: 15px;

  // 图片
  .imgstyle {
    width: 40px;
  }
}

.borderS {
  border: 1px solid #000;
  min-height: 30px;
  line-height: 30px;
}

.labelWidth {
  display: inline-block;
  min-width: 120px;
  padding-left: 10px;
}

.tableS {
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.headerInput {
  padding: 5px 20px;
}

::v-deep .el-table,
::v-deep .el-table__row,
::v-deep .el-table__cell {
  border: 1px solid #000 !important;
}
</style>
